import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Button } from 'antd-mobile'
import qs from 'qs'
export default function Jiesuan() {
  let [dilist,setdilist] = useState([])
  let id = (sessionStorage.getItem("id"))
  let getlist = ()=>{
    axios.get(`/yzk/dizhi?id=${id}`).then(res=>{
      setdilist(res.data.list)
    })
  }
  const getPayData=()=>{
    let data = jiesuan[0].num*jiesuan[0].price
    console.log(data)
    axios({
      url: `http://localhost:3000/yzk/pcpay?price=${data}`,
      method: "post",
      Headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      // qs:增加安全性的序列化
      data: qs.stringify(data),
    }).then((res) => {
        //跳转到支付页面
      window.location.href = res.data.result
     
    });
  }
  let jiesuan = JSON.parse(sessionStorage.getItem("jiesuan"))
  console.log(typeof jiesuan)
  useEffect(() => {
      getlist()
  },[])
  return (
    <div>
      <div>
        <h1 style={{marginLeft:"35%"}}>订单结算</h1>
      </div>
      <div>
        {
          dilist.map(item=>{
            return(
              <div key={item.id}>
                <div>收货人：{item.name}</div>
                <div>收货地址：{item.address}</div>
                <div>收货电话：{item.phone}</div>
              </div>
            )
          })
        }
      </div>
      <div style={{backgroundColor:"rgb(234,233,229)"}}>
        {
          jiesuan.map(item=>{
            return <div>
              <p>{item.pname}</p>
              <div>
                <div style={{float:"left"}}>
                  <img src={item.img} alt="" style={{width:"100px",height:"100px"}}/>
                </div>
                <div style={{float:"left"}}>
                  <p>商品名称：{item.pname}</p>
                  <p>商品价格：{item.price}</p>
                  <p>商品数量：{item.num}</p>
                  <p>商品尺寸：{item.size}</p>
                  <p>商品颜色：{item.color}</p>
                </div>
              </div>
              <div className='yzkdiv7'>
                                <p className='yzkp1' style={{float:'left'}}>合计￥{item.price*item.num}</p> <Button block shape='rounded' color='primary' onClick={()=>{
                                    getPayData()
                                }}> 提交订单</Button>
                            </div>
            </div>
          })
        }
      </div>
    </div>
  )
}
